<template>
	<div class="logo">嘉大学生荟</div>
</template>
<style lang="scss" scoped>
	.logo {
		font-family: "Arial Black", Gadget, sans-serif;
		width: 240px;
		font-style: italic;
		color: #ffffff;
		text-shadow: 2px 2px 2px rgba(255, 255, 255, 0.4),
			4px 4px 4px rgba(255, 255, 255, 0.3), 6px 6px 6px rgba(255, 255, 255, 0.2);
		font-size: 35px;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		position: relative;
		height: 100px;
		background-color: rgba(0, 0, 0, 0.1);

		&::before,
		&::after {
			content: "";
			position: absolute;
		}

		&::before {
			top: 20%;
			left: -20%;
			width: 50%;
			height: 5px;
			background: #e6e6e6;
			box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
			transform: translateY(-50%) rotate(-45deg);
		}

		&::after {
			bottom: 0;
			right: 0;
			border-width: 15px 15px 0 0;
			border-style: solid;
			border-color: #e6e6e6 transparent transparent #fff;
			box-shadow: -5px 5px 10px rgba(0, 0, 0, 0.1);
		}
	}
</style>